<script setup lang="ts">
import { computed, getCurrentInstance, reactive, ref, toRaw } from "vue";
import { onLoad, onUnload } from "@dcloudio/uni-app";
import { offline_course_nationality_api } from "@/package/mall/api/guider_home";
import { REG_IDCARD, REG_PHONE } from "@/constant/regular";
import { Toast } from "@/utils/toast";

import FormCheckbox from "@/components/form/checkbox.vue";
import FormPicker from "@/components/form/picker.vue";
import FormButton from "@/components/form/button.vue";
import PopupModal from "@/components/popup/modal.vue";

onLoad(() => {
  eventChannel = (
    getCurrentInstance()?.proxy as any
  ).getOpenerEventChannel() as UniApp.EventChannel;
  eventChannel.once("ev-contacts-data", (resp) => {
    console.log("ev-contacts-data", resp);

    formData.buyer_name = resp.buyer_name;
    formData.id_card = resp.id_card;
    formData.buyer_phone = resp.buyer_phone;
    formData.sex = resp.sex;
    if (resp.nationality) {
      formData.nationality = resp.nationality;
    }
    formData.address = resp.address;
    formData.desc = resp.desc;
  });

  offline_course_nationality_api().then((resp) => {
    nationList.value = resp.list;
    if (!formData.nationality) {
      formData.nationality = resp.list[0] || "";
    }
  });
});
onUnload(() => eventChannel?.emit("ev-contacts-edit", ""));

const formData = reactive({
  buyer_name: "",
  id_card: "",
  buyer_phone: "",
  sex: 1,
  nationality: "",
  address: "",
  desc: "",
});

const sexList = [
  { id: 1, name: "男" },
  { id: 2, name: "女" },
];

const nationIndex = computed({
  get() {
    return nationList.value.indexOf(formData.nationality);
  },
  set(index) {
    formData.nationality = nationList.value[index];
  },
});
const nationList = ref<string[]>([]);

const saveClick = () => {
  if (!formData.buyer_name) return Toast.show("请填写姓名");
  if (!formData.id_card) return Toast.show("请填写身份证号");
  if (!REG_IDCARD.test(formData.id_card))
    return Toast.show("请填写正确的身份证号");
  if (!formData.buyer_phone) return Toast.show("请填写手机号");
  if (!REG_PHONE.test(formData.buyer_phone))
    return Toast.show("请填写正确的手机号");
  if (!formData.address) return Toast.show("请填写联系地址");

  eventChannel?.emit("ev-contacts-edit", toRaw(formData));
};

let eventChannel: UniApp.EventChannel | undefined = undefined;
</script>

<template>
  <view class="contacts-tip">
    <image
      class="contacts-tip-icon"
      src="@/package/mall/static/train-contacts.png"
    />
    信息仅用于课程报名，三毛游保障您的信息安全
  </view>

  <view class="contacts-form">
    <view class="contacts-form-item">
      <view class="contacts-form-label">
        姓名<text class="contacts-form-star">*</text>
      </view>
      <input
        class="contacts-form-input"
        v-model="formData.buyer_name"
        placeholder="请填写姓名"
        placeholder-style="color: #999999"
      />
    </view>
    <view class="contacts-form-line"></view>
    <view class="contacts-form-item">
      <view class="contacts-form-label">
        身份证号<text class="contacts-form-star">*</text>
      </view>
      <input
        class="contacts-form-input"
        v-model="formData.id_card"
        type="idcard"
        :maxlength="18"
        placeholder="请填写身份证号"
        placeholder-style="color: #999999"
      />
    </view>
    <view class="contacts-form-line"></view>
    <view class="contacts-form-item">
      <view class="contacts-form-label">
        手机号<text class="contacts-form-star">*</text>
      </view>
      <input
        class="contacts-form-input"
        v-model="formData.buyer_phone"
        type="number"
        :maxlength="11"
        placeholder="请填写手机号"
        placeholder-style="color: #999999"
      />
    </view>
    <view class="contacts-form-line"></view>
    <view class="contacts-form-item">
      <view class="contacts-form-label">
        性别<text class="contacts-form-star">*</text>
      </view>
      <view
        class="contacts-form-sex"
        v-for="i of sexList"
        :key="i.id"
        @click="formData.sex = i.id"
      >
        <FormCheckbox :modelValue="formData.sex === i.id" />
        &nbsp;{{ i.name }}
      </view>
    </view>
    <view class="contacts-form-line"></view>
    <view class="contacts-form-item">
      <view class="contacts-form-label">
        民族<text class="contacts-form-star">*</text>
      </view>
      <view style="flex-grow: 1; min-width: 0">
        <FormPicker v-model="nationIndex" :range="nationList">
          <view class="contacts-form-item">
            <input
              class="contacts-form-input"
              v-model="formData.nationality"
              disabled
              placeholder="请选择民族"
              placeholder-style="color: #999999"
            />
            <image
              class="contacts-form-arrow"
              src="@/package/mall/static/train-contacts2.png"
            />
          </view>
        </FormPicker>
      </view>
    </view>
    <view class="contacts-form-line"></view>
    <view class="contacts-form-item">
      <view class="contacts-form-label">
        联系地址<text class="contacts-form-star">*</text>
      </view>
    </view>
    <textarea
      class="contacts-form-textarea"
      v-model="formData.address"
      auto-height
      placeholder="请填写联系地址"
    />
    <view class="contacts-form-item">
      <view class="contacts-form-label" style="width: auto">个人其他需求</view>
    </view>
    <textarea
      class="contacts-form-textarea"
      v-model="formData.desc"
      auto-height
      placeholder="若您对住宿或交通安排有任何特别需求或疑问，请详细填写，我们将尽力满足您对个性化需求。"
    />
  </view>

  <view class="contacts-btn">
    <view @click="saveClick">
      <FormButton>保存</FormButton>
    </view>
  </view>

  <PopupModal ref="popupModal" />
</template>

<style lang="scss">
page {
  padding-top: 20rpx;
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
  background-color: #ffffff;
}

.contacts-tip {
  display: flex;
  align-items: center;
  height: 64rpx;
  padding-left: 20rpx;
  margin: 0 30rpx 10rpx;
  font-size: 28rpx;
  color: #ff7e31;
  border-radius: 10rpx;
  background-color: #fff0e7;

  .contacts-tip-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 10rpx;
  }
}

.contacts-form {
  padding: 0 30rpx;
  margin-bottom: 60rpx;

  .contacts-form-item {
    display: flex;
    align-items: center;
    height: 100rpx;
  }

  .contacts-form-label {
    flex-shrink: 0;
    width: 180rpx;
    font-size: 28rpx;
    color: #606266;
  }

  .contacts-form-star {
    color: #dd524d;
    font-weight: bold;
  }

  .contacts-form-input {
    flex-grow: 1;
    min-width: 0;
    font-size: 28rpx;
    color: #333333;
  }

  .contacts-form-line {
    border-bottom: 2rpx solid #f1f1f1;
  }

  .contacts-form-sex {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #333333;
    margin-right: 60rpx;
  }

  .contacts-form-arrow {
    width: 24rpx;
    height: 24rpx;
  }

  .contacts-form-textarea {
    display: block;
    width: 100%;
    min-height: 144rpx;
    padding: 30rpx;
    font-size: 28rpx;
    color: #333333;
    line-height: 48rpx;
    border-radius: 20rpx;
    background-color: #fafafa;
    box-sizing: border-box;
  }
}

.contacts-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 106rpx;
  padding: 14rpx 60rpx env(safe-area-inset-bottom);
  background-color: #ffffff;
}
</style>